<template>
  <div style="padding: 20px">
    <div class="title_font">
      客户列表
    </div>
  </div>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="120px"
    >


      <el-form-item label="客户姓名：" prop="orderNo">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入客户姓名"
          clearable
          @keyup.enter="handleQuery"
          class="!w-200px"
        />
      </el-form-item>

      <el-form-item label="手机号：" prop="orderNo">
        <el-input
          v-model="queryParams.mobile"
          placeholder="请输入手机号"
          clearable
          @keyup.enter="handleQuery"
          class="!w-200px"
        />
      </el-form-item>


      <el-form-item label="审核流程：" prop="whether">
        <el-select v-model="queryParams.flowN" placeholder="请选择" clearable class="!w-200px">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.ORDERTYPE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>

      </el-form-item>

      <el-form-item label="订单状态：" prop="whether">
        <el-select v-model="queryParams.applyState" placeholder="请选择" clearable class="!w-180px">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.APPLICATION_STATE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>

        <el-form-item label="申请时间" prop="applyTime">
          <el-date-picker
            v-model="queryParams.applyTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="!w-200px"
          />
        </el-form-item>

      </el-form-item>

<!--      <el-form-item label="申请时间" prop="applyTime">-->
<!--        <el-date-picker-->
<!--          v-model="queryParams.applyTime"-->
<!--          value-format="YYYY-MM-DD HH:mm:ss"-->
<!--          type="daterange"-->
<!--          start-placeholder="开始日期"-->
<!--          end-placeholder="结束日期"-->
<!--          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"-->
<!--          class="!w-240px"-->
<!--        />-->
<!--      </el-form-item>-->

      <el-form-item>
        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 查询</el-button>

<!--        <el-button-->
<!--          type="success"-->
<!--          plain-->
<!--          @click="handleExport"-->
<!--          :loading="exportLoading"-->
<!--          v-hasPermi="['hutai:order:export']"-->
<!--        >-->
<!--          <Icon icon="ep:download" class="mr-5px" /> 导出-->
<!--        </el-button>-->
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" border >
      <el-table-column label="订单号" align="center" prop="id" width="150px" />
      <el-table-column
        label="申请时间"
        align="center"
        prop="createTime"
        :formatter="dateFormatter"
        width="180px"
      />
      <el-table-column label="用户头像" align="center" width="150px">
        <template #default="scope">
          <img class="userAvatar" :src="scope.row.avatar" alt="">
        </template>
      </el-table-column>
      <el-table-column label="申请人" align="center" prop="name" width="100px" />
      <el-table-column label="产品名称" align="center" prop="productName" width="150px" />
      <el-table-column label="预估额度" align="center" prop="amount" width="150px">
      </el-table-column>
      <el-table-column label="实际放款额度" align="center" width="150px" >
        <template #default="scope">
          <el-statistic title="" :value="scope.row.practicalAmount" value-style="font-size:14px" />
        </template>
      </el-table-column>
      <el-table-column
        label="实际放款时间"
        align="center"
        prop="practicalTime"
        :formatter="dateFormatter"
        width="200px"
      />
<!--      <el-table-column label="智能匹配" align="center" prop="whether" width="100px" >-->
<!--        <template #default="scope">-->
<!--          <dict-tag :type="DICT_TYPE.INTE_MAT_NOT" :value="scope.row.whether" />-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="订单流程" align="center" prop="flowN" width="150px">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.ORDERTYPE" :value="scope.row.flowN" />
        </template>
      </el-table-column>

      <el-table-column label="实际收费金额" align="center" width="150px" >
        <template #default="scope">
            <span v-if="scope.row.applyState==3">
                  <el-statistic title="" :value="scope.row.directProfit" value-style="font-size:14px" >
                    <template #suffix>
                      <span style="font-size: 14px">元</span>
                    </template>
                  </el-statistic>
              </span>
          <span v-if="scope.row.applyState<3 && scope.row.directProfit!=null">
                 <span v-if="scope.row.units=='元'">
                   <el-statistic title="" :value="scope.row.directProfit" value-style="font-size:14px" >
                       <template #suffix>
                      <span style="font-size: 14px">元</span>
                    </template>
                   </el-statistic>
                </span>
                <span v-if="scope.row.units!='元'">
                   <el-statistic title="" :value="scope.row.directProfit" value-style="font-size:14px" >
                       <template #suffix>
                      <span style="font-size: 14px">%</span>
                    </template>
                   </el-statistic>
                </span>
              </span>
        </template>
      </el-table-column>

      <el-table-column label="订单状态" align="center" prop="applyState" width="100px">
        <template #default="scope">
          <el-tag>{{getStatus(scope.row.applyState)}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="业务员姓名" align="center" prop="agentName" width="150px" >
<!--        <template #default="scope">-->
<!--          <el-button-->
<!--              link-->
<!--              v-if="!scope.row.agentName"-->
<!--              type="primary"-->
<!--              @click="clicktype=0;testfen();dialogVisible=true;alllocationDate.orderId=scope.row.id;"-->
<!--          >-->
<!--            分配业务员-->
<!--          </el-button>-->
<!--        </template>-->

      </el-table-column>
<!--      <el-table-column label="取消业务员分配" align="center" width="140px" >-->
<!--        <template #default="scope">-->
<!--          <el-button-->
<!--              link-->
<!--              v-if="scope.row.agentName"-->
<!--              type="primary"-->
<!--              @click="clickcance=0;alllocationDate.orderId=scope.row.id;alllocationDate.agentId=scope.row.agentId;ConfCancAllo=true;"-->
<!--          >-->
<!--            取消业务员分配-->
<!--          </el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="权证员姓名" align="center" prop="warrantName" width="150px" >
<!--        <template #default="scope">-->
<!--          <el-button-->
<!--              link-->
<!--              v-if="!scope.row.warrantName"-->
<!--              type="primary"-->
<!--              @click="clicktype=1;testfen();dialogVisible=true;alllocationDate.orderId=scope.row.id;"-->

<!--          >-->
<!--            分配权证员-->
<!--          </el-button>-->
<!--        </template>-->
      </el-table-column>
<!--      <el-table-column label="取消权证员分配" align="center" width="140px" >-->
<!--        <template #default="scope">-->
<!--          <el-button-->
<!--              link-->
<!--              v-if="scope.row.warrantName"-->
<!--              type="primary"-->
<!--              @click="clickcance=1;alllocationDate.orderId=scope.row.id;alllocationDate.warrantId=scope.row.warrantId;ConfCancAllo=true;"-->
<!--          >-->
<!--            取消权证员分配-->
<!--          </el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="操作" align="center">
        <template #default="scope">

          <el-button
            link
            type="primary"
            @click="openForm(scope.row.id)"
          >
            详情
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>
<!--  <el-dialog-->
<!--      title="分配"-->
<!--      v-model="dialogVisible"-->
<!--      center-->
<!--      style="padding-top: 20px"-->
<!--      width="500px">-->
<!--    <el-table-->
<!--        :data="salesmanList"-->
<!--        style="width: 100%">-->
<!--      <el-table-column-->
<!--          prop="avatar"-->
<!--          label="头像"-->
<!--          width="120">-->
<!--        <template #default="scope">-->
<!--          <img :src="scope.row.avatar" style="width: 35px;height: 35px">-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="nickname"-->
<!--        label="用户"-->
<!--        width="100">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--          prop="name"-->
<!--          label="姓名"-->
<!--          width="100">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--          prop="mobile"-->
<!--          label="电话">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--          label="操作">-->
<!--        <template #default="scope">-->
<!--          <el-button-->
<!--              link-->
<!--              type="primary"-->

<!--              @click="-->
<!--              alllocationDate.agentId=scope.row.id;-->
<!--              alllocationDate.agentName=scope.row.name;-->
<!--              alllocationDate.warrantId=scope.row.id;-->
<!--              alllocationDate.warrantName=scope.row.name;-->
<!--              Allocateornot=true-->
<!--              "-->
<!--          >-->
<!--            分配-->
<!--          </el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->
<!--  </el-dialog>-->

<!--  <el-dialog-->
<!--      title="确认分配信息"-->
<!--      v-model="Allocateornot"-->
<!--      center-->
<!--      style="width: 300px;padding-top: 20px;padding-bottom: 10px">-->
<!--    <span slot="footer" class="dialog-footer" style="margin-left: 18%;" >-->
<!--    <el-button @click="Allocateornot = false">取 消</el-button>-->

<!--    <el-button type="primary" style="margin-left: 40px" @click="Allocateornot = false;dialogVisible=false;allocation()">确 定</el-button>-->

<!--    </span>-->
<!--  </el-dialog>-->

<!--  <el-dialog-->
<!--      title="确认取消分配"-->
<!--      center-->
<!--      style="padding-top: 20px;padding-bottom: 10px"-->
<!--      v-model="ConfCancAllo"-->
<!--      width="300px">-->
<!--    <span slot="footer" class="dialog-footer" style="margin-left: 18%; ">-->
<!--    <el-button @click="ConfCancAllo = false">取 消</el-button>-->
<!--    <el-button style="margin-left: 40px" type="primary" @click="ConfCancAllo=false;Cancelsalesperson()">确 定</el-button>-->
<!--  </span>-->
<!--  </el-dialog>-->
</template>

<script setup lang="ts">
import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
import { dateFormatter } from '@/utils/formatTime'
import * as UsersApi from '@/api/hutai/clientpool'
import * as OrderApi from '@/api/hutai/order'
import { useRouter } from "vue-router";
import {getUserOrderByRolePage} from "@/api/hutai/order";
const { push } = useRouter()
//业务员列表弹出窗
const dialogVisible= ref(false)
//确认取消分配弹出窗
const  ConfCancAllo=ref(false)
//确认分配业务员窗口
const  Allocateornot =ref(false)
// 点击的是分配业务员或者权证员
let clicktype=ref(0)
let clickcance=ref(0)
// 用户id
// const  userid =ref()
// 增加或者取消业务员结构
const alllocationDate = ref({
  orderId: null,
  agentId: null,
  agentName: null,
  warrantId: null,
  warrantName: null
})


defineOptions({ name: 'Order' })

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: null,
  mobile: '',
  applyTime: '',
  applyState: '',
  flowN: '',
  whether: '',
  id:''
})
const queryFormRef = ref() // 搜索的表单

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {

    const data = await OrderApi.getUserOrderByRolePage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

//0：失败，1：待跟进，2跟进中，3已完成
const getStatus = (num) => {
  if(num==0){
    return '失败'
  }else if(num==1){
    return '待跟进'
  }else if(num==2){
    return '跟进中'
  }else if(num==3){
    return '已完成'
  }
}

//获取业务员列表
const salesmanList=ref()
const testfen=()=>{
  if (clicktype.value==0){
    UsersApi.getAgentList().then(res=>{
      salesmanList.value=res
    })
  } else {
    UsersApi.getWarrantList().then(res=>{
      salesmanList.value=res
    })
  }
}

//增加业务员函数
const putAgent= async ()=>{
  const data = alllocationDate.value
  await UsersApi.putAgent(data)
  getList()

}
const putWarrant= async ()=>{
  const data = alllocationDate.value

  await UsersApi.putWarrant(data)
  getList()

}

// 取消业务员函数
const  Cancelsalesperson = async () =>{
  const data =  alllocationDate.value;
  if (clickcance.value==0){
    await UsersApi.cancelAgent(data)
  }else {
    await UsersApi.cancelWarran(data)
  }
  getList()
}
//增加业务员，增加权证员分配
const allocation=()=>{

  if(clicktype.value==0){
    alllocationDate.value.warrantId=0
    alllocationDate.value.warrantName=''
    putAgent()
  }else {
    alllocationDate.value.agentId=0
    alllocationDate.value.agentName=''
    putWarrant()
  }
  getList()
}

const router = useRouter();

/** 详情 */
const openForm = (id: number) => {
  push({
    path:'/salesmanHome/performanceDetails',
    query:{id:id}
  })
}


/** 初始化 **/
onMounted(() => {
  getList()
})

</script>

<style lang="scss">
.title_font{
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
}

.userAvatar{
  width: 50px;
  height: 50px;
  border-radius: 4px;
}
</style>
